<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>API: colorpicker   ColorPicker.js  (YUI Library)</title>

	<link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" />
	<link rel="stylesheet" type="text/css" href="assets/api.css" />

    <script type="text/javascript" src="assets/api-js"></script>
    <script type="text/javascript" src="assets/ac-js"></script>
</head>

<body id="yahoo-com">

<div id="doc3" class="yui-t2">
	<div id="hd">
        <h1><a href="http://developer.yahoo.com/yui/" title="Yahoo! UI Library">Yahoo! UI Library</a></h1>
        <h3>colorpicker&nbsp; <span class="subtitle">2.9.0</span></h3>
        <a href="./index.html" title="Yahoo! UI Library">Yahoo! UI Library</a> 
            &gt; <a href="./module_colorpicker.html" title="colorpicker">colorpicker</a>
                
                 &gt; ColorPicker.js (source view) 
        <form onsubmit="return false">
            <div id="propertysearch">
                Search: <input autocomplete="off" id="searchinput" />
                <div id="searchresults">
                    &nbsp;
                </div>
            </div>
        </form>
	</div>

	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
            <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
                <fieldset>
                    <legend>Filters</legend>
                <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
                <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
                <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
                </fieldset>
            </form>

                    <div id="srcout">
                        <style>
                            #doc3 .classopts { display:none; }
                        </style>
                        <div class="highlight"><pre><span class="cm">/**</span>
<span class="cm"> * The colorpicker module provides a widget for selecting colors</span>
<span class="cm"> * @module colorpicker</span>
<span class="cm"> * @requires yahoo, dom, event, element, slider</span>
<span class="cm"> */</span>
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">_pickercount</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">util</span>   <span class="o">=</span> <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">util</span><span class="p">,</span>
        <span class="nx">lang</span>   <span class="o">=</span> <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">lang</span><span class="p">,</span>
        <span class="nx">Slider</span> <span class="o">=</span> <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nx">Slider</span><span class="p">,</span>
        <span class="nx">Color</span>  <span class="o">=</span> <span class="nx">util</span><span class="p">.</span><span class="nx">Color</span><span class="p">,</span>
        <span class="nx">Dom</span>    <span class="o">=</span> <span class="nx">util</span><span class="p">.</span><span class="nx">Dom</span><span class="p">,</span>
        <span class="nx">Event</span>  <span class="o">=</span> <span class="nx">util</span><span class="p">.</span><span class="nx">Event</span><span class="p">,</span>
        <span class="nx">sub</span>    <span class="o">=</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">substitute</span><span class="p">,</span>
        
        <span class="nx">b</span> <span class="o">=</span> <span class="s2">&quot;yui-picker&quot;</span><span class="p">;</span>
    

    <span class="cm">/**</span>
<span class="cm">     * A widget to select colors</span>
<span class="cm">     * @namespace YAHOO.widget</span>
<span class="cm">     * @class YAHOO.widget.ColorPicker</span>
<span class="cm">     * @extends YAHOO.util.Element</span>
<span class="cm">     * @constructor</span>
<span class="cm">     * @param {HTMLElement | String | Object} el(optional) The html </span>
<span class="cm">     * element that represents the colorpicker, or the attribute object to use. </span>
<span class="cm">     * An element will be created if none provided.</span>
<span class="cm">     * @param {Object} attr (optional) A key map of the colorpicker&#39;s </span>
<span class="cm">     * initial attributes.  Ignored if first arg is attributes object.</span>
<span class="cm">     */</span>
    <span class="kd">function</span> <span class="nx">ColorPicker</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">_pickercount</span> <span class="o">=</span> <span class="nx">_pickercount</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">logger</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nx">LogWriter</span><span class="p">(</span><span class="s2">&quot;ColorPicker&quot;</span><span class="p">);</span>
        <span class="nx">attr</span> <span class="o">=</span> <span class="nx">attr</span> <span class="o">||</span> <span class="p">{};</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">arguments</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">YAHOO</span><span class="p">.</span><span class="nx">lang</span><span class="p">.</span><span class="nx">isString</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">el</span><span class="p">.</span><span class="nx">nodeName</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">attr</span> <span class="o">=</span> <span class="nx">el</span><span class="p">;</span> <span class="c1">// treat first arg as attr object</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">element</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>
        <span class="p">}</span>
        
        <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">el</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">attr</span><span class="p">.</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// create if we dont have one</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;creating host element&quot;</span><span class="p">);</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_createHostElement</span><span class="p">(</span><span class="nx">attr</span><span class="p">);</span>
        <span class="p">}</span>

        <span class="nx">ColorPicker</span><span class="p">.</span><span class="nx">superclass</span><span class="p">.</span><span class="nx">constructor</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">attr</span><span class="p">);</span> 

        <span class="k">this</span><span class="p">.</span><span class="nx">initPicker</span><span class="p">();</span>
    <span class="p">}</span>

    <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">ColorPicker</span><span class="p">,</span> <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">Element</span><span class="p">,</span> <span class="p">{</span>
    
        <span class="cm">/**</span>
<span class="cm">         * The element ids used by this control</span>
<span class="cm">         * @property ID</span>
<span class="cm">         * @final</span>
<span class="cm">         */</span>
        <span class="nx">ID</span> <span class="o">:</span> <span class="p">{</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;red&quot; form field</span>
<span class="cm">             * @property ID.R</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-r</span>
<span class="cm">             */</span>
            <span class="nx">R</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-r&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;red&quot; hex pair output</span>
<span class="cm">             * @property ID.R_HEX</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-rhex</span>
<span class="cm">             */</span>
            <span class="nx">R_HEX</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-rhex&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;green&quot; form field</span>
<span class="cm">             * @property ID.G</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-g</span>
<span class="cm">             */</span>
            <span class="nx">G</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-g&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;green&quot; hex pair output</span>
<span class="cm">             * @property ID.G_HEX</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-ghex</span>
<span class="cm">             */</span>
            <span class="nx">G_HEX</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-ghex&quot;</span><span class="p">,</span>


            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;blue&quot; form field</span>
<span class="cm">             * @property ID.B</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-b</span>
<span class="cm">             */</span>
            <span class="nx">B</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-b&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;blue&quot; hex pair output</span>
<span class="cm">             * @property ID.B_HEX</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-bhex</span>
<span class="cm">             */</span>
            <span class="nx">B_HEX</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-bhex&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;hue&quot; form field</span>
<span class="cm">             * @property ID.H</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-h</span>
<span class="cm">             */</span>
            <span class="nx">H</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-h&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;saturation&quot; form field</span>
<span class="cm">             * @property ID.S</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-s</span>
<span class="cm">             */</span>
            <span class="nx">S</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-s&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the &quot;value&quot; form field</span>
<span class="cm">             * @property ID.V</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-v</span>
<span class="cm">             */</span>
            <span class="nx">V</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-v&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the picker region slider</span>
<span class="cm">             * @property ID.PICKER_BG</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-bg</span>
<span class="cm">             */</span>
            <span class="nx">PICKER_BG</span><span class="o">:</span>      <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-bg&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the picker region thumb</span>
<span class="cm">             * @property ID.PICKER_THUMB</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-thumb</span>
<span class="cm">             */</span>
            <span class="nx">PICKER_THUMB</span><span class="o">:</span>   <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-thumb&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the hue slider</span>
<span class="cm">             * @property ID.HUE_BG</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-hue-bg</span>
<span class="cm">             */</span>
            <span class="nx">HUE_BG</span><span class="o">:</span>         <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hue-bg&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the hue thumb</span>
<span class="cm">             * @property ID.HUE_THUMB</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-hue-thumb</span>
<span class="cm">             */</span>
            <span class="nx">HUE_THUMB</span><span class="o">:</span>      <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hue-thumb&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the hex value form field</span>
<span class="cm">             * @property ID.HEX</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-hex</span>
<span class="cm">             */</span>
            <span class="nx">HEX</span><span class="o">:</span>            <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hex&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the color swatch</span>
<span class="cm">             * @property ID.SWATCH</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-swatch</span>
<span class="cm">             */</span>
            <span class="nx">SWATCH</span><span class="o">:</span>         <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-swatch&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the websafe color swatch</span>
<span class="cm">             * @property ID.WEBSAFE_SWATCH</span>
<span class="cm">             * @type String</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-websafe-swatch</span>
<span class="cm">             */</span>
            <span class="nx">WEBSAFE_SWATCH</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-websafe-swatch&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the control details</span>
<span class="cm">             * @property ID.CONTROLS</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-controls</span>
<span class="cm">             */</span>
            <span class="nx">CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-controls&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the rgb controls</span>
<span class="cm">             * @property ID.RGB_CONTROLS</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-rgb-controls</span>
<span class="cm">             */</span>
            <span class="nx">RGB_CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-rgb-controls&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the hsv controls</span>
<span class="cm">             * @property ID.HSV_CONTROLS</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-hsv-controls</span>
<span class="cm">             */</span>
            <span class="nx">HSV_CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hsv-controls&quot;</span><span class="p">,</span>
            
            <span class="cm">/**</span>
<span class="cm">             * The id for the hsv controls</span>
<span class="cm">             * @property ID.HEX_CONTROLS</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-hex-controls</span>
<span class="cm">             */</span>
            <span class="nx">HEX_CONTROLS</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hex-controls&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the hex summary</span>
<span class="cm">             * @property ID.HEX_SUMMARY</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-hex-summary</span>
<span class="cm">             */</span>
            <span class="nx">HEX_SUMMARY</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-hex-summary&quot;</span><span class="p">,</span>

            <span class="cm">/**</span>
<span class="cm">             * The id for the controls section header</span>
<span class="cm">             * @property ID.CONTROLS_LABEL</span>
<span class="cm">             * @final</span>
<span class="cm">             * @default yui-picker-controls-label</span>
<span class="cm">             */</span>
            <span class="nx">CONTROLS_LABEL</span><span class="o">:</span> <span class="nx">b</span> <span class="o">+</span> <span class="s2">&quot;-controls-label&quot;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Constants for any script-generated messages.  The values here</span>
<span class="cm">         * are the default messages.  They can be updated by providing</span>
<span class="cm">         * the complete list to the constructor for the &quot;txt&quot; attribute.</span>
<span class="cm">         * Note: the strings are added to the DOM as HTML.</span>
<span class="cm">         * @property TXT</span>
<span class="cm">         * @final</span>
<span class="cm">         */</span>
        <span class="nx">TXT</span> <span class="o">:</span> <span class="p">{</span>
            <span class="nx">ILLEGAL_HEX</span><span class="o">:</span> <span class="s2">&quot;Illegal hex value entered&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;Show color details&quot;</span><span class="p">,</span>
            <span class="nx">HIDE_CONTROLS</span><span class="o">:</span> <span class="s2">&quot;Hide color details&quot;</span><span class="p">,</span>
            <span class="nx">CURRENT_COLOR</span><span class="o">:</span> <span class="s2">&quot;Currently selected color: {rgb}&quot;</span><span class="p">,</span>
            <span class="nx">CLOSEST_WEBSAFE</span><span class="o">:</span> <span class="s2">&quot;Closest websafe color: {rgb}. Click to select.&quot;</span><span class="p">,</span>
            <span class="nx">R</span><span class="o">:</span> <span class="s2">&quot;R&quot;</span><span class="p">,</span>
            <span class="nx">G</span><span class="o">:</span> <span class="s2">&quot;G&quot;</span><span class="p">,</span>
            <span class="nx">B</span><span class="o">:</span> <span class="s2">&quot;B&quot;</span><span class="p">,</span>
            <span class="nx">H</span><span class="o">:</span> <span class="s2">&quot;H&quot;</span><span class="p">,</span>
            <span class="nx">S</span><span class="o">:</span> <span class="s2">&quot;S&quot;</span><span class="p">,</span>
            <span class="nx">V</span><span class="o">:</span> <span class="s2">&quot;V&quot;</span><span class="p">,</span>
            <span class="nx">HEX</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span><span class="p">,</span>
            <span class="nx">DEG</span><span class="o">:</span> <span class="s2">&quot;\u00B0&quot;</span><span class="p">,</span>
            <span class="nx">PERCENT</span><span class="o">:</span> <span class="s2">&quot;%&quot;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Constants for the default image locations for img tags that are</span>
<span class="cm">         * generated by the control.  They can be modified by passing the</span>
<span class="cm">         * complete list to the contructor for the &quot;images&quot; attribute</span>
<span class="cm">         * @property IMAGE</span>
<span class="cm">         * @final</span>
<span class="cm">         */</span>
        <span class="nx">IMAGE</span> <span class="o">:</span> <span class="p">{</span>
            <span class="nx">PICKER_THUMB</span><span class="o">:</span> <span class="s2">&quot;../../build/colorpicker/assets/picker_thumb.png&quot;</span><span class="p">,</span>
            <span class="nx">HUE_THUMB</span><span class="o">:</span> <span class="s2">&quot;../../build/colorpicker/assets/hue_thumb.png&quot;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Constants for the control&#39;s default default values</span>
<span class="cm">         * @property DEFAULT</span>
<span class="cm">         * @final</span>
<span class="cm">         */</span>
        <span class="nx">DEFAULT</span> <span class="o">:</span> <span class="p">{</span>
            <span class="nx">PICKER_SIZE</span><span class="o">:</span> <span class="mi">180</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Constants for the control&#39;s configuration attributes</span>
<span class="cm">         * @property OPT</span>
<span class="cm">         * @final</span>
<span class="cm">         */</span>
        <span class="nx">OPT</span> <span class="o">:</span> <span class="p">{</span>
            <span class="nx">HUE</span>         <span class="o">:</span> <span class="s2">&quot;hue&quot;</span><span class="p">,</span>
            <span class="nx">SATURATION</span>  <span class="o">:</span> <span class="s2">&quot;saturation&quot;</span><span class="p">,</span>
            <span class="nx">VALUE</span>       <span class="o">:</span> <span class="s2">&quot;value&quot;</span><span class="p">,</span>
            <span class="nx">RED</span>     <span class="o">:</span> <span class="s2">&quot;red&quot;</span><span class="p">,</span>
            <span class="nx">GREEN</span>   <span class="o">:</span> <span class="s2">&quot;green&quot;</span><span class="p">,</span>
            <span class="nx">BLUE</span>    <span class="o">:</span> <span class="s2">&quot;blue&quot;</span><span class="p">,</span>
            <span class="nx">HSV</span>     <span class="o">:</span> <span class="s2">&quot;hsv&quot;</span><span class="p">,</span>
            <span class="nx">RGB</span>     <span class="o">:</span> <span class="s2">&quot;rgb&quot;</span><span class="p">,</span>
            <span class="nx">WEBSAFE</span> <span class="o">:</span> <span class="s2">&quot;websafe&quot;</span><span class="p">,</span>
            <span class="nx">HEX</span>     <span class="o">:</span> <span class="s2">&quot;hex&quot;</span><span class="p">,</span>
            <span class="nx">PICKER_SIZE</span>       <span class="o">:</span> <span class="s2">&quot;pickersize&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_CONTROLS</span>     <span class="o">:</span> <span class="s2">&quot;showcontrols&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_RGB_CONTROLS</span> <span class="o">:</span> <span class="s2">&quot;showrgbcontrols&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_HSV_CONTROLS</span> <span class="o">:</span> <span class="s2">&quot;showhsvcontrols&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_HEX_CONTROLS</span> <span class="o">:</span> <span class="s2">&quot;showhexcontrols&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_HEX_SUMMARY</span>  <span class="o">:</span> <span class="s2">&quot;showhexsummary&quot;</span><span class="p">,</span>
            <span class="nx">SHOW_WEBSAFE</span>      <span class="o">:</span> <span class="s2">&quot;showwebsafe&quot;</span><span class="p">,</span>
            <span class="nx">CONTAINER</span>         <span class="o">:</span> <span class="s2">&quot;container&quot;</span><span class="p">,</span>
            <span class="nx">IDS</span>      <span class="o">:</span> <span class="s2">&quot;ids&quot;</span><span class="p">,</span>
            <span class="nx">ELEMENTS</span> <span class="o">:</span> <span class="s2">&quot;elements&quot;</span><span class="p">,</span>
            <span class="nx">TXT</span>      <span class="o">:</span> <span class="s2">&quot;txt&quot;</span><span class="p">,</span>
            <span class="nx">IMAGES</span>   <span class="o">:</span> <span class="s2">&quot;images&quot;</span><span class="p">,</span>
            <span class="nx">ANIMATE</span>  <span class="o">:</span> <span class="s2">&quot;animate&quot;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Flag to allow individual UI updates to forego animation if available.</span>
<span class="cm">         * True during construction for initial thumb placement.  Set to false</span>
<span class="cm">         * after that.</span>
<span class="cm">         *</span>
<span class="cm">         * @property skipAnim</span>
<span class="cm">         * @type Boolean</span>
<span class="cm">         * @default true</span>
<span class="cm">         */</span>
        <span class="nx">skipAnim</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>

        <span class="cm">/**</span>
<span class="cm">         * Creates the host element if it doesn&#39;t exist</span>
<span class="cm">         * @method _createHostElement</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_createHostElement</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span>

            <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">CSS</span><span class="p">.</span><span class="nx">BASE</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">el</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">CSS</span><span class="p">.</span><span class="nx">BASE</span><span class="p">;</span>
            <span class="p">}</span>
            
            <span class="k">return</span> <span class="nx">el</span><span class="p">;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Moves the hue slider into the position dictated by the current state</span>
<span class="cm">         * of the control</span>
<span class="cm">         * @method _updateHueSlider</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateHueSlider</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">),</span>
                <span class="nx">h</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span><span class="p">);</span>

            <span class="nx">h</span> <span class="o">=</span> <span class="nx">size</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">h</span> <span class="o">/</span> <span class="mi">360</span> <span class="o">*</span> <span class="nx">size</span><span class="p">);</span>
            
            <span class="c1">// 0 is at the top and bottom of the hue slider.  Always go to</span>
            <span class="c1">// the top so we don&#39;t end up sending the thumb to the bottom</span>
            <span class="c1">// when the value didn&#39;t actually change (e.g., a conversion</span>
            <span class="c1">// produced 360 instead of 0 and the value was already 0).</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">h</span> <span class="o">===</span> <span class="nx">size</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">h</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Hue slider is being set to &quot;</span> <span class="o">+</span> <span class="nx">h</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">hueSlider</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">skipAnim</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Moves the picker slider into the position dictated by the current state</span>
<span class="cm">         * of the control</span>
<span class="cm">         * @method _updatePickerSlider</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updatePickerSlider</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">),</span>
                <span class="nx">s</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">),</span>
                <span class="nx">v</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">);</span>

            <span class="nx">s</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">s</span> <span class="o">*</span> <span class="nx">size</span> <span class="o">/</span> <span class="mi">100</span><span class="p">);</span>
            <span class="nx">v</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">size</span> <span class="o">-</span> <span class="p">(</span><span class="nx">v</span> <span class="o">*</span> <span class="nx">size</span> <span class="o">/</span> <span class="mi">100</span><span class="p">));</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Setting picker slider to &quot;</span> <span class="o">+</span> <span class="p">[</span><span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="p">]);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">setRegionValue</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">skipAnim</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Moves the sliders into the position dictated by the current state</span>
<span class="cm">         * of the control</span>
<span class="cm">         * @method _updateSliders</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateSliders</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_updateHueSlider</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_updatePickerSlider</span><span class="p">();</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Sets the control to the specified rgb value and</span>
<span class="cm">         * moves the sliders to the proper positions</span>
<span class="cm">         * @method setValue</span>
<span class="cm">         * @param rgb {[int, int, int]} the rgb value</span>
<span class="cm">         * @param silent {boolean} whether or not to fire the change event</span>
<span class="cm">         */</span>
        <span class="nx">setValue</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rgb</span><span class="p">,</span> <span class="nx">silent</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">silent</span> <span class="o">=</span> <span class="p">(</span><span class="nx">silent</span><span class="p">)</span> <span class="o">||</span> <span class="kc">false</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RGB</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">,</span> <span class="nx">silent</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_updateSliders</span><span class="p">();</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * The hue slider</span>
<span class="cm">         * @property hueSlider</span>
<span class="cm">         * @type YAHOO.widget.Slider</span>
<span class="cm">         */</span>
        <span class="nx">hueSlider</span> <span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
        
        <span class="cm">/**</span>
<span class="cm">         * The picker region</span>
<span class="cm">         * @property pickerSlider</span>
<span class="cm">         * @type YAHOO.widget.Slider</span>
<span class="cm">         */</span>
        <span class="nx">pickerSlider</span> <span class="o">:</span> <span class="kc">null</span><span class="p">,</span>

        <span class="cm">/**</span>
<span class="cm">         * Translates the slider value into hue, int[0,359]</span>
<span class="cm">         * @method _getH</span>
<span class="cm">         * @protected</span>
<span class="cm">         * @return {int} the hue from 0 to 359</span>
<span class="cm">         */</span>
        <span class="nx">_getH</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">),</span>
                <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">size</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">hueSlider</span><span class="p">.</span><span class="nx">getValue</span><span class="p">())</span> <span class="o">/</span> <span class="nx">size</span><span class="p">;</span>
            <span class="nx">h</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">h</span><span class="o">*</span><span class="mi">360</span><span class="p">);</span>
            <span class="k">return</span> <span class="p">(</span><span class="nx">h</span> <span class="o">===</span> <span class="mi">360</span><span class="p">)</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="nx">h</span><span class="p">;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Translates the slider value into saturation, int[0,1], left to right</span>
<span class="cm">         * @method _getS</span>
<span class="cm">         * @protected</span>
<span class="cm">         * @return {int} the saturation from 0 to 1</span>
<span class="cm">         */</span>
        <span class="nx">_getS</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">getXValue</span><span class="p">()</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Translates the slider value into value/brightness, int[0,1], top</span>
<span class="cm">         * to bottom</span>
<span class="cm">         * @method _getV</span>
<span class="cm">         * @protected</span>
<span class="cm">         * @return {int} the value from 0 to 1</span>
<span class="cm">         */</span>
        <span class="nx">_getV</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">);</span>
            <span class="k">return</span> <span class="p">(</span><span class="nx">size</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">getYValue</span><span class="p">())</span> <span class="o">/</span> <span class="nx">size</span><span class="p">;</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Updates the background of the swatch with the current rbg value.</span>
<span class="cm">         * Also updates the websafe swatch to the closest websafe color</span>
<span class="cm">         * @method _updateSwatch</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateSwatch</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RGB</span><span class="p">),</span>
                <span class="nx">websafe</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">WEBSAFE</span><span class="p">),</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">SWATCH</span><span class="p">),</span>
                <span class="nx">color</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">),</span>
                <span class="nx">txt</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">TXT</span><span class="p">);</span>

            <span class="nx">Dom</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="s2">&quot;background-color&quot;</span><span class="p">,</span> <span class="s2">&quot;rgb(&quot;</span> <span class="o">+</span> <span class="nx">color</span>  <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">);</span>
            <span class="nx">el</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="nx">sub</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">CURRENT_COLOR</span><span class="p">,</span> <span class="p">{</span>
                    <span class="s2">&quot;rgb&quot;</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span><span class="p">)</span>
                <span class="p">});</span>


            <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="p">);</span>
            <span class="nx">color</span> <span class="o">=</span> <span class="nx">websafe</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">);</span>

            <span class="nx">Dom</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="s2">&quot;background-color&quot;</span><span class="p">,</span> <span class="s2">&quot;rgb(&quot;</span> <span class="o">+</span> <span class="nx">color</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">);</span>
            <span class="nx">el</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="nx">sub</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">CLOSEST_WEBSAFE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="s2">&quot;rgb&quot;</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span> <span class="o">+</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">rgb2hex</span><span class="p">(</span><span class="nx">websafe</span><span class="p">)</span>
                <span class="p">});</span>

        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Reads the sliders and converts the values to RGB, updating the</span>
<span class="cm">         * internal state for all the individual form fields</span>
<span class="cm">         * @method _getValuesFromSliders</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_getValuesFromSliders</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;hsv &quot;</span> <span class="o">+</span> <span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_getH</span><span class="p">(),</span><span class="k">this</span><span class="p">.</span><span class="nx">_getS</span><span class="p">(),</span><span class="k">this</span><span class="p">.</span><span class="nx">_getV</span><span class="p">()]);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RGB</span><span class="p">,</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">hsv2rgb</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_getH</span><span class="p">(),</span> <span class="k">this</span><span class="p">.</span><span class="nx">_getS</span><span class="p">(),</span> <span class="k">this</span><span class="p">.</span><span class="nx">_getV</span><span class="p">()));</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Updates the form field controls with the state data contained</span>
<span class="cm">         * in the control.</span>
<span class="cm">         * @method _updateFormFields</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateFormFields</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">H</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">S</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">V</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">R</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RED</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">R_HEX</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">dec2hex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RED</span><span class="p">));</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">G</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">GREEN</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">G_HEX</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">dec2hex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">GREEN</span><span class="p">));</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">B</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">BLUE</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">B_HEX</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">dec2hex</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">BLUE</span><span class="p">));</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Event handler for the hue slider.</span>
<span class="cm">         * @method _onHueSliderChange</span>
<span class="cm">         * @param newOffset {int} pixels from the start position</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_onHueSliderChange</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">newOffset</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;hue update: &quot;</span> <span class="o">+</span> <span class="nx">newOffset</span> <span class="p">,</span> <span class="s2">&quot;warn&quot;</span><span class="p">);</span>

            <span class="kd">var</span> <span class="nx">h</span>        <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_getH</span><span class="p">(),</span>
                <span class="nx">rgb</span>      <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">hsv2rgb</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span>
                <span class="nx">styleDef</span> <span class="o">=</span> <span class="s2">&quot;rgb(&quot;</span> <span class="o">+</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;,&quot;</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;)&quot;</span><span class="p">;</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span><span class="p">,</span> <span class="nx">h</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="c1">// set picker background to the hue</span>
            <span class="nx">Dom</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">PICKER_BG</span><span class="p">),</span> <span class="s2">&quot;background-color&quot;</span><span class="p">,</span> <span class="nx">styleDef</span><span class="p">);</span>

            <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hueSlider</span><span class="p">.</span><span class="nx">valueChangeSource</span> <span class="o">!==</span> <span class="nx">Slider</span><span class="p">.</span><span class="nx">SOURCE_SET_VALUE</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_getValuesFromSliders</span><span class="p">();</span>
            <span class="p">}</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">_updateFormFields</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_updateSwatch</span><span class="p">();</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Event handler for the picker slider, which controls the</span>
<span class="cm">         * saturation and value/brightness.</span>
<span class="cm">         * @method _onPickerSliderChange</span>
<span class="cm">         * @param newOffset {{x: int, y: int}} x/y pixels from the start position</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_onPickerSliderChange</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">newOffset</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;picker update [{x}, {y}]&quot;</span><span class="p">,</span> <span class="nx">newOffset</span><span class="p">));</span>

            <span class="kd">var</span> <span class="nx">s</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">_getS</span><span class="p">(),</span> <span class="nx">v</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">_getV</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">s</span><span class="o">*</span><span class="mi">100</span><span class="p">),</span> <span class="kc">true</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">v</span><span class="o">*</span><span class="mi">100</span><span class="p">),</span> <span class="kc">true</span><span class="p">);</span>

            <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">valueChangeSource</span> <span class="o">!==</span> <span class="nx">Slider</span><span class="p">.</span><span class="nx">SOURCE_SET_VALUE</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_getValuesFromSliders</span><span class="p">();</span>
            <span class="p">}</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">_updateFormFields</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_updateSwatch</span><span class="p">();</span>
        <span class="p">},</span>


        <span class="cm">/**</span>
<span class="cm">         * Key map to well-known commands for txt field input</span>
<span class="cm">         * @method _getCommand</span>
<span class="cm">         * @param e {Event} the keypress or keydown event</span>
<span class="cm">         * @return {int} a command code</span>
<span class="cm">         * &lt;ul&gt;</span>
<span class="cm">         * &lt;li&gt;0 = not a number, letter in range, or special key&lt;/li&gt;</span>
<span class="cm">         * &lt;li&gt;1 = number&lt;/li&gt;</span>
<span class="cm">         * &lt;li&gt;2 = a-fA-F&lt;/li&gt;</span>
<span class="cm">         * &lt;li&gt;3 = increment (up arrow)&lt;/li&gt;</span>
<span class="cm">         * &lt;li&gt;4 = decrement (down arrow)&lt;/li&gt;</span>
<span class="cm">         * &lt;li&gt;5 = special key (tab, delete, return, escape, left, right)&lt;/li&gt; </span>
<span class="cm">         * &lt;li&gt;6 = return&lt;/li&gt;</span>
<span class="cm">         * &lt;/ul&gt;</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_getCommand</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nx">Event</span><span class="p">.</span><span class="nx">getCharCode</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>

            <span class="c1">//alert(Event.getCharCode(e) + &quot;, &quot; + e.keyCode + &quot;, &quot; + e.charCode);</span>

            <span class="c1">// special keys</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">c</span> <span class="o">===</span> <span class="mi">38</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// up arrow</span>
                <span class="k">return</span> <span class="mi">3</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">c</span> <span class="o">===</span> <span class="mi">13</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// return</span>
                <span class="k">return</span> <span class="mi">6</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">c</span> <span class="o">===</span> <span class="mi">40</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// down array</span>
                <span class="k">return</span> <span class="mi">4</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&gt;=</span> <span class="mi">48</span> <span class="o">&amp;&amp;</span> <span class="nx">c</span><span class="o">&lt;=</span><span class="mi">57</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// 0-9</span>
                <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&gt;=</span> <span class="mi">97</span> <span class="o">&amp;&amp;</span> <span class="nx">c</span><span class="o">&lt;=</span><span class="mi">102</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// a-f</span>
                <span class="k">return</span> <span class="mi">2</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&gt;=</span> <span class="mi">65</span> <span class="o">&amp;&amp;</span> <span class="nx">c</span><span class="o">&lt;=</span><span class="mi">70</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// A-F</span>
                <span class="k">return</span> <span class="mi">2</span><span class="p">;</span>
            <span class="c1">//} else if (&quot;8, 9, 13, 27, 37, 39&quot;.indexOf(c) &gt; -1 || </span>
            <span class="c1">//              (c &gt;= 112 &amp;&amp; c &lt;=123)) { // including F-keys</span>
            <span class="c1">// tab, delete, return, escape, left, right or ctrl/meta sequences</span>
            <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="s2">&quot;8, 9, 13, 27, 37, 39&quot;</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="o">&gt;</span> <span class="o">-</span><span class="mi">1</span> <span class="o">||</span>
                       <span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span> <span class="o">||</span> <span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// special chars</span>
                <span class="k">return</span> <span class="mi">5</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="c1">// something we probably don&#39;t want</span>
                <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Use the value of the text field to update the control</span>
<span class="cm">         * @method _useFieldValue</span>
<span class="cm">         * @param e {Event} an event</span>
<span class="cm">         * @param el {HTMLElement} the field</span>
<span class="cm">         * @param prop {string} the key to the linked property</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_useFieldValue</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">prop</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>

            <span class="k">if</span> <span class="p">(</span><span class="nx">prop</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
            <span class="p">}</span>

            <span class="k">if</span> <span class="p">(</span><span class="nx">val</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">prop</span><span class="p">))</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">prop</span><span class="p">,</span> <span class="nx">val</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Handle keypress on one of the rgb or hsv fields.</span>
<span class="cm">         * @method _rgbFieldKeypress</span>
<span class="cm">         * @param e {Event} the keypress event</span>
<span class="cm">         * @param el {HTMLElement} the field</span>
<span class="cm">         * @param prop {string} the key to the linked property</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_rgbFieldKeypress</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">prop</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">command</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_getCommand</span><span class="p">(</span><span class="nx">e</span><span class="p">),</span>
                <span class="nx">inc</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">shiftKey</span><span class="p">)</span> <span class="o">?</span> <span class="mi">10</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
            <span class="k">switch</span> <span class="p">(</span><span class="nx">command</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">case</span> <span class="mi">6</span><span class="o">:</span> <span class="c1">// return, update the value</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">_useFieldValue</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
                    <span class="k">break</span><span class="p">;</span>
                            
                <span class="k">case</span> <span class="mi">3</span><span class="o">:</span> <span class="c1">// up arrow, increment</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">prop</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">prop</span><span class="p">)</span><span class="o">+</span><span class="nx">inc</span><span class="p">,</span> <span class="mi">255</span><span class="p">));</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">_updateFormFields</span><span class="p">();</span>
                    <span class="c1">//Event.stopEvent(e);</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">4</span><span class="o">:</span> <span class="c1">// down arrow, decrement</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">prop</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">prop</span><span class="p">)</span><span class="o">-</span><span class="nx">inc</span><span class="p">,</span> <span class="mi">0</span><span class="p">));</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">_updateFormFields</span><span class="p">();</span>
                    <span class="c1">//Event.stopEvent(e);</span>
                    <span class="k">break</span><span class="p">;</span>

                <span class="k">default</span><span class="o">:</span>
            <span class="p">}</span>

        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Handle keydown on the hex field</span>
<span class="cm">         * @method _hexFieldKeypress</span>
<span class="cm">         * @param e {Event} the keypress event</span>
<span class="cm">         * @param el {HTMLElement} the field</span>
<span class="cm">         * @param prop {string} the key to the linked property</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_hexFieldKeypress</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">prop</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">command</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_getCommand</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">command</span> <span class="o">===</span> <span class="mi">6</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// return, update the value</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_useFieldValue</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">},</span>

        <span class="cm">/** </span>
<span class="cm">         * Allows numbers and special chars, and by default allows a-f.  </span>
<span class="cm">         * Used for the hex field keypress handler.</span>
<span class="cm">         * @method _hexOnly</span>
<span class="cm">         * @param e {Event} the event</span>
<span class="cm">         * @param numbersOnly omits a-f if set to true</span>
<span class="cm">         * @protected</span>
<span class="cm">         * @return {boolean} false if we are canceling the event</span>
<span class="cm">         */</span>
        <span class="nx">_hexOnly</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">numbersOnly</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">command</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_getCommand</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
            <span class="k">switch</span> <span class="p">(</span><span class="nx">command</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">case</span> <span class="mi">6</span><span class="o">:</span> <span class="c1">// return</span>
                <span class="k">case</span> <span class="mi">5</span><span class="o">:</span> <span class="c1">// special char</span>
                <span class="k">case</span> <span class="mi">1</span><span class="o">:</span> <span class="c1">// number</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">2</span><span class="o">:</span> <span class="c1">// hex char (a-f)</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">numbersOnly</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">break</span><span class="p">;</span>
                    <span class="p">}</span>

                    <span class="c1">// fallthrough is intentional</span>

                <span class="k">default</span><span class="o">:</span> <span class="c1">// prevent alpha and punctuation</span>
                    <span class="nx">Event</span><span class="p">.</span><span class="nx">stopEvent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
                    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">},</span>

        <span class="cm">/** </span>
<span class="cm">         * Allows numbers and special chars only.  Used for the</span>
<span class="cm">         * rgb and hsv fields keypress handler.</span>
<span class="cm">         * @method _numbersOnly</span>
<span class="cm">         * @param e {Event} the event</span>
<span class="cm">         * @protected</span>
<span class="cm">         * @return {boolean} false if we are canceling the event</span>
<span class="cm">         */</span>
        <span class="nx">_numbersOnly</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_hexOnly</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Returns the element reference that is saved.  The id can be either</span>
<span class="cm">         * the element id, or the key for this id in the &quot;id&quot; config attribute.</span>
<span class="cm">         * For instance, the host element id can be obtained by passing its</span>
<span class="cm">         * id (default: &quot;yui_picker&quot;) or by its key &quot;YUI_PICKER&quot;.</span>
<span class="cm">         * @param id {string} the element id, or key </span>
<span class="cm">         * @return {HTMLElement} a reference to the element</span>
<span class="cm">         */</span>
        <span class="nx">getElement</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> 
            <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">ELEMENTS</span><span class="p">)[</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">IDS</span><span class="p">)[</span><span class="nx">id</span><span class="p">]];</span> 
        <span class="p">},</span>

        <span class="nx">_createElements</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Building markup&quot;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">child</span><span class="p">,</span> <span class="nx">img</span><span class="p">,</span> <span class="nx">fld</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span>
                <span class="nx">ids</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">IDS</span><span class="p">),</span>
                <span class="nx">txt</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">TXT</span><span class="p">),</span>
                <span class="nx">images</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">IMAGES</span><span class="p">),</span>
                <span class="nx">Elem</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">type</span><span class="p">);</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">lang</span><span class="p">.</span><span class="nx">augmentObject</span><span class="p">(</span><span class="nx">n</span><span class="p">,</span> <span class="nx">o</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
                    <span class="p">}</span>
                    <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
                <span class="p">},</span>
                <span class="nx">RGBElem</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">merge</span><span class="p">({</span>
                            <span class="c1">//type: &quot;txt&quot;,</span>
                            <span class="nx">autocomplete</span><span class="o">:</span> <span class="s2">&quot;off&quot;</span><span class="p">,</span>
                            <span class="nx">value</span><span class="o">:</span> <span class="s2">&quot;0&quot;</span><span class="p">,</span>
                            <span class="nx">size</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span>
                            <span class="nx">maxlength</span><span class="o">:</span> <span class="mi">3</span>
                        <span class="p">},</span> <span class="nx">obj</span><span class="p">);</span>

                    <span class="nx">o</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">o</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
                    <span class="k">return</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">o</span><span class="p">);</span>
                <span class="p">};</span>

            <span class="nx">p</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;element&quot;</span><span class="p">);</span>

            <span class="c1">// Picker slider (S and V) ---------------------------------------------</span>

            <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">PICKER_BG</span><span class="p">],</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-bg&quot;</span><span class="p">,</span>
                <span class="nx">tabIndex</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span>
                <span class="nx">hideFocus</span><span class="o">:</span> <span class="kc">true</span>
            <span class="p">});</span>

            <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">PICKER_THUMB</span><span class="p">],</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-thumb&quot;</span>
            <span class="p">});</span>

            <span class="nx">img</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;img&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">src</span><span class="o">:</span> <span class="nx">images</span><span class="p">.</span><span class="nx">PICKER_THUMB</span>
            <span class="p">});</span>

            <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">img</span><span class="p">);</span>
            <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
            <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>
            
            <span class="c1">// Hue slider ---------------------------------------------</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HUE_BG</span><span class="p">],</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hue-bg&quot;</span><span class="p">,</span>
                <span class="nx">tabIndex</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span>
                <span class="nx">hideFocus</span><span class="o">:</span> <span class="kc">true</span>
            <span class="p">});</span>

            <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HUE_THUMB</span><span class="p">],</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hue-thumb&quot;</span>
            <span class="p">});</span>

            <span class="nx">img</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;img&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">src</span><span class="o">:</span> <span class="nx">images</span><span class="p">.</span><span class="nx">HUE_THUMB</span>
            <span class="p">});</span>

            <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">img</span><span class="p">);</span>
            <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
            <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>


            <span class="c1">// controls ---------------------------------------------</span>

            <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">CONTROLS</span><span class="p">],</span>
                <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-controls&quot;</span>
            <span class="p">});</span>

            <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>
            <span class="nx">p</span> <span class="o">=</span> <span class="nx">el</span><span class="p">;</span>

                <span class="c1">// controls header</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;hd&quot;</span>
                <span class="p">});</span>

                <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;a&quot;</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">CONTROLS_LABEL</span><span class="p">],</span>
                    <span class="c1">//className: &quot;yui-picker-controls-label&quot;,</span>
                    <span class="nx">href</span><span class="o">:</span> <span class="s2">&quot;#&quot;</span>
                <span class="p">});</span>
                <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
                <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

                <span class="c1">// bd</span>
                <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;bd&quot;</span>
                <span class="p">});</span>

                <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>
                <span class="nx">p</span> <span class="o">=</span> <span class="nx">el</span><span class="p">;</span>

                    <span class="c1">// rgb</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;ul&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">RGB_CONTROLS</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-rgb-controls&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">R</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">R</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-r&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fld</span><span class="p">);</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">G</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">G</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-g&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fld</span><span class="p">);</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">B</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">B</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-b&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fld</span><span class="p">);</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

                    <span class="c1">// hsv</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;ul&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HSV_CONTROLS</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hsv-controls&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">H</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">H</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-h&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fld</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">DEG</span><span class="p">));</span>

                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">S</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">S</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-s&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fld</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">PERCENT</span><span class="p">));</span>

                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">V</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">fld</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">V</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-v&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fld</span><span class="p">);</span>
                    <span class="nx">child</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">PERCENT</span><span class="p">));</span>

                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
                    <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>


                    <span class="c1">// hex summary</span>

                    <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;ul&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX_SUMMARY</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hex_summary&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">R_HEX</span><span class="p">]</span>
                    <span class="p">});</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">G_HEX</span><span class="p">]</span>
                    <span class="p">});</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">B_HEX</span><span class="p">]</span>
                    <span class="p">});</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
                    <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

                    <span class="c1">// hex field</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX_CONTROLS</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hex-controls&quot;</span>
                    <span class="p">});</span>
                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">txt</span><span class="p">.</span><span class="nx">HEX</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span><span class="p">));</span>

                    <span class="nx">child</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">RGBElem</span><span class="p">(</span><span class="s2">&quot;input&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-hex&quot;</span><span class="p">,</span>
                        <span class="nx">size</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span>
                        <span class="nx">maxlength</span><span class="o">:</span> <span class="mi">6</span>
                    <span class="p">});</span>

                    <span class="nx">el</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">child</span><span class="p">);</span>
                    <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

                    <span class="nx">p</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;element&quot;</span><span class="p">);</span>

                    <span class="c1">// swatch</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">SWATCH</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-swatch&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

                    <span class="c1">// websafe swatch</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Elem</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">id</span><span class="o">:</span> <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="p">],</span>
                        <span class="nx">className</span><span class="o">:</span> <span class="s2">&quot;yui-picker-websafe-swatch&quot;</span>
                    <span class="p">});</span>

                    <span class="nx">p</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

        <span class="p">},</span>

        <span class="nx">_attachRGBHSV</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">id</span><span class="p">),</span> <span class="s2">&quot;keydown&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">me</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">me</span><span class="p">.</span><span class="nx">_rgbFieldKeypress</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">config</span><span class="p">);</span>
                <span class="p">},</span> <span class="k">this</span><span class="p">);</span>
            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">id</span><span class="p">),</span> <span class="s2">&quot;keypress&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_numbersOnly</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">id</span><span class="p">),</span> <span class="s2">&quot;blur&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">me</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">me</span><span class="p">.</span><span class="nx">_useFieldValue</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">config</span><span class="p">);</span>
                <span class="p">},</span> <span class="k">this</span><span class="p">);</span>
        <span class="p">},</span>


        <span class="cm">/**</span>
<span class="cm">         * Updates the rgb attribute with the current state of the r,g,b</span>
<span class="cm">         * fields.  This is invoked from change listeners on these</span>
<span class="cm">         * attributes to facilitate updating these values from the</span>
<span class="cm">         * individual form fields</span>
<span class="cm">         * @method _updateRGB</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateRGB</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RED</span><span class="p">),</span> 
                       <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">GREEN</span><span class="p">),</span>
                       <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">BLUE</span><span class="p">)];</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;RGB value set to &quot;</span> <span class="o">+</span> <span class="nx">rgb</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RGB</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">_updateSliders</span><span class="p">();</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Creates any missing DOM structure.</span>
<span class="cm">         *</span>
<span class="cm">         * @method _initElements</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_initElements</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="c1">// bind all of our elements</span>
            <span class="kd">var</span> <span class="nx">o</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">,</span> 
                <span class="nx">ids</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">IDS</span><span class="p">),</span> 
                <span class="nx">els</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">ELEMENTS</span><span class="p">),</span> 
                      <span class="nx">i</span><span class="p">,</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">id</span><span class="p">;</span>

            <span class="c1">// Add the default value as a key for each element for easier lookup</span>
            <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">lang</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">,</span> <span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
                    <span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">ids</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="p">}</span>
            <span class="p">}</span>

            <span class="c1">// Check for picker element, if not there, create all of them</span>
            <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">ids</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">PICKER_BG</span><span class="p">]);</span>
            <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_createElements</span><span class="p">();</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Using pre-existing markup&quot;</span><span class="p">);</span>
            <span class="p">}</span>

            <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">ids</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">lang</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">ids</span><span class="p">,</span> <span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
                    <span class="c1">// look for element</span>
                    <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">ids</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>

                    <span class="c1">// generate an id if the implementer passed in an element reference,</span>
                    <span class="c1">// and the element did not have an id already</span>
                    <span class="nx">id</span> <span class="o">=</span> <span class="nx">Dom</span><span class="p">.</span><span class="nx">generateId</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>

                    <span class="c1">// update the id in case we generated the id</span>
                    <span class="nx">ids</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">id</span><span class="p">;</span> <span class="c1">// key is WEBSAFE_SWATCH</span>
                    <span class="nx">ids</span><span class="p">[</span><span class="nx">ids</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">id</span><span class="p">;</span> <span class="c1">// key is websafe_swatch</span>

                    <span class="c1">// store the dom ref</span>
                    <span class="nx">els</span><span class="p">[</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">el</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span>

        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Sets the initial state of the sliders</span>
<span class="cm">         * @method initPicker</span>
<span class="cm">         */</span>
        <span class="nx">initPicker</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_initSliders</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_bindUI</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">syncUI</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Creates the Hue and Value/Saturation Sliders.</span>
<span class="cm">         *</span>
<span class="cm">         * @method _initSliders</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_initSliders</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">ID</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">,</span>
                <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;picker size&quot;</span> <span class="o">+</span> <span class="nx">size</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">hueSlider</span> <span class="o">=</span> <span class="nx">Slider</span><span class="p">.</span><span class="nx">getVertSlider</span><span class="p">(</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HUE_BG</span><span class="p">),</span> 
                <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HUE_THUMB</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">size</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span> <span class="o">=</span> <span class="nx">Slider</span><span class="p">.</span><span class="nx">getSliderRegion</span><span class="p">(</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">PICKER_BG</span><span class="p">),</span> 
                <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">PICKER_THUMB</span><span class="p">),</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">size</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">size</span><span class="p">);</span>

            <span class="c1">// Apply animate attribute configuration</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">ANIMATE</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">ANIMATE</span><span class="p">));</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Adds event listeners to Sliders and UI elements.  Wires everything</span>
<span class="cm">         * up.</span>
<span class="cm">         *</span>
<span class="cm">         * @method _bindUI</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_bindUI</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">ID</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">,</span>
                <span class="nx">O</span>  <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">;</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">hueSlider</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="s2">&quot;change&quot;</span><span class="p">,</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_onHueSliderChange</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="s2">&quot;change&quot;</span><span class="p">,</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_onPickerSliderChange</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="p">),</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
                   <span class="k">this</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">O</span><span class="p">.</span><span class="nx">WEBSAFE</span><span class="p">));</span>
               <span class="p">},</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">CONTROLS_LABEL</span><span class="p">),</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
                   <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">O</span><span class="p">.</span><span class="nx">SHOW_CONTROLS</span><span class="p">,</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">O</span><span class="p">.</span><span class="nx">SHOW_CONTROLS</span><span class="p">));</span>
                   <span class="nx">Event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
               <span class="p">},</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">_attachRGBHSV</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">R</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">RED</span><span class="p">);</span> 
            <span class="k">this</span><span class="p">.</span><span class="nx">_attachRGBHSV</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">G</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">GREEN</span><span class="p">);</span> 
            <span class="k">this</span><span class="p">.</span><span class="nx">_attachRGBHSV</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">B</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">BLUE</span><span class="p">);</span> 
            <span class="k">this</span><span class="p">.</span><span class="nx">_attachRGBHSV</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">H</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">HUE</span><span class="p">);</span> 
            <span class="k">this</span><span class="p">.</span><span class="nx">_attachRGBHSV</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">S</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">);</span> 
            <span class="k">this</span><span class="p">.</span><span class="nx">_attachRGBHSV</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">V</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">);</span> 

            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX</span><span class="p">),</span> <span class="s2">&quot;keydown&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">me</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">me</span><span class="p">.</span><span class="nx">_hexFieldKeypress</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">HEX</span><span class="p">);</span>
                <span class="p">},</span> <span class="k">this</span><span class="p">);</span>

            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX</span><span class="p">),</span> <span class="s2">&quot;keypress&quot;</span><span class="p">,</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">_hexOnly</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
            <span class="nx">Event</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX</span><span class="p">),</span> <span class="s2">&quot;blur&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">me</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">me</span><span class="p">.</span><span class="nx">_useFieldValue</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">O</span><span class="p">.</span><span class="nx">HEX</span><span class="p">);</span>
                <span class="p">},</span> <span class="k">this</span><span class="p">);</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Wrapper for _updateRGB, but allows non-animated update</span>
<span class="cm">         *</span>
<span class="cm">         * @method syncUI</span>
<span class="cm">         * @param skipAnim {Boolean} Omit Slider animation for this action</span>
<span class="cm">         */</span>
        <span class="nx">syncUI</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">skipAnim</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">skipAnim</span> <span class="o">=</span> <span class="nx">skipAnim</span><span class="p">;</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGB</span><span class="p">();</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">skipAnim</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
        <span class="p">},</span>


        <span class="cm">/**</span>
<span class="cm">         * Updates the RGB values from the current state of the HSV</span>
<span class="cm">         * values.  Executed when the one of the HSV form fields are</span>
<span class="cm">         * updated</span>
<span class="cm">         * _updateRGBFromHSV</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateRGBFromHSV</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span><span class="p">),</span> 
                       <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">)</span><span class="o">/</span><span class="mi">100</span><span class="p">,</span>
                       <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">)</span><span class="o">/</span><span class="mi">100</span><span class="p">],</span>
                <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">hsv2rgb</span><span class="p">(</span><span class="nx">hsv</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;HSV converted to RGB &quot;</span> <span class="o">+</span> <span class="nx">hsv</span> <span class="o">+</span> <span class="s2">&quot; : &quot;</span> <span class="o">+</span> <span class="nx">rgb</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RGB</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">_updateSliders</span><span class="p">();</span>
        <span class="p">},</span>

        <span class="cm">/**</span>
<span class="cm">         * Parses the hex string to normalize shorthand values, converts</span>
<span class="cm">         * the hex value to rgb and updates the rgb attribute (which</span>
<span class="cm">         * updates the state for all of the other values)</span>
<span class="cm">         * method _updateHex</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_updateHex</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
           
            <span class="kd">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span><span class="p">),</span>
                <span class="nx">l</span>   <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
                <span class="nx">c</span><span class="p">,</span><span class="nx">i</span><span class="p">,</span><span class="nx">rgb</span><span class="p">;</span>

            <span class="c1">// support #369 -&gt; #336699 shorthand</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">l</span> <span class="o">===</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">c</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
                <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">l</span><span class="p">;</span> <span class="nx">i</span><span class="o">=</span><span class="nx">i</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">c</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">c</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="nx">c</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="p">}</span>

                <span class="nx">hex</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
            <span class="p">}</span>

            <span class="k">if</span> <span class="p">(</span><span class="nx">hex</span><span class="p">.</span><span class="nx">length</span> <span class="o">!==</span> <span class="mi">6</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">TXT</span><span class="p">.</span><span class="nx">ILLEGAL_HEX</span><span class="p">),</span> <span class="s2">&quot;error&quot;</span><span class="p">);</span>
                <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
            <span class="p">}</span>

            <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">hex2rgb</span><span class="p">(</span><span class="nx">hex</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;Hex value set to {hex} ({rgb})&quot;</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">hex</span><span class="o">:</span> <span class="nx">hex</span><span class="p">,</span> <span class="nx">rgb</span><span class="o">:</span> <span class="nx">rgb</span>
                <span class="p">}));</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="nx">rgb</span><span class="p">);</span>
        <span class="p">},</span>


        <span class="cm">/**</span>
<span class="cm">         * Returns the cached element reference.  If the id is not a string, it</span>
<span class="cm">         * is assumed that it is an element and this is returned.</span>
<span class="cm">         * @param id {string|HTMLElement} the element key, id, or ref</span>
<span class="cm">         * @param on {boolean} hide or show.  If true, show</span>
<span class="cm">         * @protected</span>
<span class="cm">         */</span>
        <span class="nx">_hideShowEl</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span> <span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="p">(</span><span class="nx">lang</span><span class="p">.</span><span class="nx">isString</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="o">?</span> <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="o">:</span> <span class="nx">id</span><span class="p">);</span>
            <span class="nx">Dom</span><span class="p">.</span><span class="nx">setStyle</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="s2">&quot;display&quot;</span><span class="p">,</span> <span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="o">?</span> <span class="s2">&quot;&quot;</span> <span class="o">:</span> <span class="s2">&quot;none&quot;</span><span class="p">);</span>
        <span class="p">},</span>


        <span class="cm">/**</span>
<span class="cm">         * Sets up the config attributes and the change listeners for this</span>
<span class="cm">         * properties</span>
<span class="cm">         * @method initAttributes</span>
<span class="cm">         * @param attr An object containing default attribute values</span>
<span class="cm">         */</span>
        <span class="nx">initAttributes</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>

            <span class="nx">attr</span> <span class="o">=</span> <span class="nx">attr</span> <span class="o">||</span> <span class="p">{};</span>
            <span class="nx">ColorPicker</span><span class="p">.</span><span class="nx">superclass</span><span class="p">.</span><span class="nx">initAttributes</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">attr</span><span class="p">);</span>
            
            <span class="cm">/**</span>
<span class="cm">             * The size of the picker. Trying to change this is not recommended.</span>
<span class="cm">             * @attribute pickersize</span>
<span class="cm">             * @default 180</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">size</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">DEFAULT</span><span class="p">.</span><span class="nx">PICKER_SIZE</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current hue value 0-360</span>
<span class="cm">             * @attribute hue</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">hue</span> <span class="o">||</span> <span class="mi">0</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current saturation value 0-100</span>
<span class="cm">             * @attribute saturation</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">saturation</span> <span class="o">||</span> <span class="mi">0</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current value/brightness value 0-100</span>
<span class="cm">             * @attribute value</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">value</span> <span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current red value 0-255</span>
<span class="cm">             * @attribute red</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RED</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">red</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">red</span> <span class="o">:</span> <span class="mi">255</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current green value 0-255</span>
<span class="cm">             * @attribute green </span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">GREEN</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">green</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">green</span> <span class="o">:</span> <span class="mi">255</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current blue value 0-255</span>
<span class="cm">             * @attribute blue</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">BLUE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">blue</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">blue</span> <span class="o">:</span> <span class="mi">255</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isNumber</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current hex value #000000-#FFFFFF, without the #</span>
<span class="cm">             * @attribute hex</span>
<span class="cm">             * @type string</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">hex</span> <span class="o">||</span> <span class="s2">&quot;FFFFFF&quot;</span><span class="p">,</span>
                    <span class="nx">validator</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isString</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The current rgb value.  Updates the state of all of the</span>
<span class="cm">             * other value fields.  Read-only: use setValue to set the</span>
<span class="cm">             * controls rgb value.</span>
<span class="cm">             * @attribute hex</span>
<span class="cm">             * @type [int, int, int]</span>
<span class="cm">             * @readonly</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RGB</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">rgb</span> <span class="o">||</span> <span class="p">[</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">],</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rgb</span><span class="p">)</span> <span class="p">{</span>

                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RED</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="kc">true</span><span class="p">);</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">GREEN</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="kc">true</span><span class="p">);</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">BLUE</span><span class="p">,</span> <span class="nx">rgb</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="kc">true</span><span class="p">);</span>

                        <span class="kd">var</span> <span class="nx">websafe</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">websafe</span><span class="p">(</span><span class="nx">rgb</span><span class="p">),</span>
                            <span class="nx">hex</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">rgb2hex</span><span class="p">(</span><span class="nx">rgb</span><span class="p">),</span>
                            <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">Color</span><span class="p">.</span><span class="nx">rgb2hsv</span><span class="p">(</span><span class="nx">rgb</span><span class="p">);</span>

                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">WEBSAFE</span><span class="p">,</span> <span class="nx">websafe</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span><span class="p">,</span> <span class="nx">hex</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>


                        <span class="k">this</span><span class="p">.</span><span class="nx">logger</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sub</span><span class="p">(</span><span class="s2">&quot;RGB value set to {rgb} (hsv: {hsv})&quot;</span><span class="p">,</span> <span class="p">{</span>
                                <span class="s2">&quot;hsv&quot;</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">,</span> <span class="s2">&quot;rgb&quot;</span><span class="o">:</span> <span class="nx">rgb</span>
                            <span class="p">}));</span>

                        <span class="c1">// fix bug #1754338 - when saturation is 0, hue is</span>
                        <span class="c1">// silently always set to 0, but input field not updated</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">hsv</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span> <span class="p">{</span>
                            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span><span class="p">,</span> <span class="nx">hsv</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="kc">true</span><span class="p">);</span>
                        <span class="p">}</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">hsv</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span><span class="o">*</span><span class="mi">100</span><span class="p">),</span> <span class="kc">true</span><span class="p">);</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">hsv</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span><span class="o">*</span><span class="mi">100</span><span class="p">),</span> <span class="kc">true</span><span class="p">);</span>
                    <span class="p">},</span>
                    <span class="nx">readonly</span><span class="o">:</span> <span class="kc">true</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * If the color picker will live inside of a container object,</span>
<span class="cm">             * set, provide a reference to it so the control can use the</span>
<span class="cm">             * container&#39;s events.</span>
<span class="cm">             * @attribute container</span>
<span class="cm">             * @type YAHOO.widget.Panel</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">CONTAINER</span><span class="p">,</span> <span class="p">{</span>
                        <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
                        <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
                            <span class="k">if</span> <span class="p">(</span><span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
                                <span class="c1">// Position can get out of sync when the</span>
                                <span class="c1">// control is manipulated while display is</span>
                                <span class="c1">// none.  Resetting the slider constraints</span>
                                <span class="c1">// when it is visible gets the state back in</span>
                                <span class="c1">// order.</span>
                                <span class="nx">container</span><span class="p">.</span><span class="nx">showEvent</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                                    <span class="c1">// this.pickerSlider.thumb.resetConstraints();</span>
                                    <span class="c1">// this.hueSlider.thumb.resetConstraints();</span>
                                    <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
                                <span class="p">},</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
                            <span class="p">}</span>
                        <span class="p">}</span>
                    <span class="p">});</span>
            <span class="cm">/**</span>
<span class="cm">             * The closest current websafe value</span>
<span class="cm">             * @attribute websafe</span>
<span class="cm">             * @type int</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">WEBSAFE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">websafe</span> <span class="o">||</span> <span class="p">[</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">]</span>
                <span class="p">});</span>


            <span class="kd">var</span> <span class="nx">ids</span> <span class="o">=</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">ids</span> <span class="o">||</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">merge</span><span class="p">({},</span> <span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">),</span> <span class="nx">i</span><span class="p">;</span>

            <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">attr</span><span class="p">.</span><span class="nx">ids</span> <span class="o">&amp;&amp;</span> <span class="nx">_pickercount</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">ids</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">lang</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">ids</span><span class="p">,</span> <span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
                        <span class="nx">ids</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">ids</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="nx">_pickercount</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span>
            <span class="p">}</span>


            <span class="cm">/**</span>
<span class="cm">             * A list of element ids and/or element references used by the </span>
<span class="cm">             * control.  The default is the this.ID list, and can be customized</span>
<span class="cm">             * by passing a list in the contructor</span>
<span class="cm">             * @attribute ids</span>
<span class="cm">             * @type {referenceid: realid}</span>
<span class="cm">             * @writeonce</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">IDS</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">ids</span><span class="p">,</span>
                    <span class="nx">writeonce</span><span class="o">:</span> <span class="kc">true</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * A list of txt strings for internationalization.  Default</span>
<span class="cm">             * is this.TXT</span>
<span class="cm">             * @attribute txt</span>
<span class="cm">             * @type {key: txt}</span>
<span class="cm">             * @writeonce</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">TXT</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">txt</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">TXT</span><span class="p">,</span>
                    <span class="nx">writeonce</span><span class="o">:</span> <span class="kc">true</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * The img src default list</span>
<span class="cm">             * is this.IMAGES</span>
<span class="cm">             * @attribute images</span>
<span class="cm">             * @type {key: image}</span>
<span class="cm">             * @writeonce</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">IMAGES</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">images</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">IMAGE</span><span class="p">,</span>
                    <span class="nx">writeonce</span><span class="o">:</span> <span class="kc">true</span>
                <span class="p">});</span>
            <span class="cm">/**</span>
<span class="cm">             * The element refs used by this control.  Set at initialization</span>
<span class="cm">             * @attribute elements</span>
<span class="cm">             * @type {id: HTMLElement}</span>
<span class="cm">             * @readonly</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">ELEMENTS</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="p">{},</span>
                    <span class="nx">readonly</span><span class="o">:</span> <span class="kc">true</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * Hide/show the entire set of controls</span>
<span class="cm">             * @attribute showcontrols</span>
<span class="cm">             * @type boolean</span>
<span class="cm">             * @default true</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_CONTROLS</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">showcontrols</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">showcontrols</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>

                        <span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nx">Dom</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s2">&quot;bd&quot;</span><span class="p">,</span> <span class="s2">&quot;div&quot;</span><span class="p">,</span> 
                                <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">CONTROLS</span><span class="p">))[</span><span class="mi">0</span><span class="p">];</span>

                        <span class="k">this</span><span class="p">.</span><span class="nx">_hideShowEl</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">on</span><span class="p">);</span>

                        <span class="k">this</span><span class="p">.</span><span class="nx">getElement</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">CONTROLS_LABEL</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> 
                            <span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="o">?</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">TXT</span><span class="p">).</span><span class="nx">HIDE_CONTROLS</span> <span class="o">:</span>
                                   <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">TXT</span><span class="p">).</span><span class="nx">SHOW_CONTROLS</span><span class="p">;</span>

                    <span class="p">}</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * Hide/show the rgb controls</span>
<span class="cm">             * @attribute showrgbcontrols</span>
<span class="cm">             * @type boolean</span>
<span class="cm">             * @default true</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_RGB_CONTROLS</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">showrgbcontrols</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">showrgbcontrols</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">_hideShowEl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">RGB_CONTROLS</span><span class="p">,</span> <span class="nx">on</span><span class="p">);</span>
                    <span class="p">}</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * Hide/show the hsv controls</span>
<span class="cm">             * @attribute showhsvcontrols</span>
<span class="cm">             * @type boolean</span>
<span class="cm">             * @default false</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">showhsvcontrols</span><span class="p">)</span> <span class="o">?</span>
                                          <span class="nx">attr</span><span class="p">.</span><span class="nx">showhsvcontrols</span> <span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
                        <span class="c1">//Dom.setStyle(this.getElement(this.ID.HSV_CONTROLS), &quot;visibility&quot;, (on) ? &quot;&quot; : &quot;hidden&quot;);</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">_hideShowEl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HSV_CONTROLS</span><span class="p">,</span> <span class="nx">on</span><span class="p">);</span>

                        <span class="c1">// can&#39;t show both the hsv controls and the rbg hex summary</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">on</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="p">))</span> <span class="p">{</span>
                            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * Hide/show the hex controls</span>
<span class="cm">             * @attribute showhexcontrols</span>
<span class="cm">             * @type boolean</span>
<span class="cm">             * @default true</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HEX_CONTROLS</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">showhexcontrols</span><span class="p">)</span> <span class="o">?</span>
                                          <span class="nx">attr</span><span class="p">.</span><span class="nx">showhexcontrols</span> <span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">_hideShowEl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX_CONTROLS</span><span class="p">,</span> <span class="nx">on</span><span class="p">);</span>
                    <span class="p">}</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * Hide/show the websafe swatch</span>
<span class="cm">             * @attribute showwebsafe</span>
<span class="cm">             * @type boolean</span>
<span class="cm">             * @default true</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_WEBSAFE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">showwebsafe</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">showwebsafe</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">_hideShowEl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">WEBSAFE_SWATCH</span><span class="p">,</span> <span class="nx">on</span><span class="p">);</span>
                    <span class="p">}</span>
                <span class="p">});</span>

            <span class="cm">/**</span>
<span class="cm">             * Hide/show the hex summary</span>
<span class="cm">             * @attribute showhexsummary</span>
<span class="cm">             * @type boolean</span>
<span class="cm">             * @default true</span>
<span class="cm">             */</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HEX_SUMMARY</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">showhexsummary</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">showhexsummary</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">this</span><span class="p">.</span><span class="nx">_hideShowEl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ID</span><span class="p">.</span><span class="nx">HEX_SUMMARY</span><span class="p">,</span> <span class="nx">on</span><span class="p">);</span>

                        <span class="c1">// can&#39;t show both the hsv controls and the rbg hex summary</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nx">on</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="p">))</span> <span class="p">{</span>
                            <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SHOW_HSV_CONTROLS</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">});</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setAttributeConfig</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">ANIMATE</span><span class="p">,</span> <span class="p">{</span>
                    <span class="nx">value</span><span class="o">:</span> <span class="nx">lang</span><span class="p">.</span><span class="nx">isBoolean</span><span class="p">(</span><span class="nx">attr</span><span class="p">.</span><span class="nx">animate</span><span class="p">)</span> <span class="o">?</span> <span class="nx">attr</span><span class="p">.</span><span class="nx">animate</span> <span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
                    <span class="nx">method</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">on</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">)</span> <span class="p">{</span>
                            <span class="k">this</span><span class="p">.</span><span class="nx">pickerSlider</span><span class="p">.</span><span class="nx">animate</span> <span class="o">=</span> <span class="nx">on</span><span class="p">;</span>
                            <span class="k">this</span><span class="p">.</span><span class="nx">hueSlider</span><span class="p">.</span><span class="nx">animate</span> <span class="o">=</span> <span class="nx">on</span><span class="p">;</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                <span class="p">});</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HUE</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGBFromHSV</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">SATURATION</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGBFromHSV</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">VALUE</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGBFromHSV</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">RED</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGB</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">GREEN</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGB</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">BLUE</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateRGB</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">OPT</span><span class="p">.</span><span class="nx">HEX</span> <span class="o">+</span> <span class="s2">&quot;Change&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_updateHex</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>

            <span class="k">this</span><span class="p">.</span><span class="nx">_initElements</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">});</span>

    <span class="nx">YAHOO</span><span class="p">.</span><span class="nx">widget</span><span class="p">.</span><span class="nx">ColorPicker</span> <span class="o">=</span> <span class="nx">ColorPicker</span><span class="p">;</span>
<span class="p">})();</span>
</pre></div>

                    </div>
			</div>
		</div>
		<div class="yui-b">
            <div class="nav">

                    <div id="moduleList" class="module">
                        <h4>Modules</h4>
                        <ul class="content">
                                <li class=""><a href="module_animation.html" title="animation">animation</a></li>
                                <li class=""><a href="module_autocomplete.html" title="autocomplete">autocomplete</a></li>
                                <li class=""><a href="module_button.html" title="button">button</a></li>
                                <li class=""><a href="module_calendar.html" title="calendar">calendar</a></li>
                                <li class=""><a href="module_carousel.html" title="carousel">carousel</a></li>
                                <li class=""><a href="module_charts.html" title="charts">charts</a></li>
                                <li class="selected"><a href="module_colorpicker.html" title="colorpicker">colorpicker</a></li>
                                <li class=""><a href="module_connection.html" title="connection">connection</a></li>
                                <li class=""><a href="module_container.html" title="container">container</a></li>
                                <li class=""><a href="module_cookie.html" title="cookie">cookie</a></li>
                                <li class=""><a href="module_datasource.html" title="datasource">datasource</a></li>
                                <li class=""><a href="module_datatable.html" title="datatable">datatable</a></li>
                                <li class=""><a href="module_datemath.html" title="datemath">datemath</a></li>
                                <li class=""><a href="module_dom.html" title="dom">dom</a></li>
                                <li class=""><a href="module_dragdrop.html" title="dragdrop">dragdrop</a></li>
                                <li class=""><a href="module_editor.html" title="editor">editor</a></li>
                                <li class=""><a href="module_element.html" title="element">element</a></li>
                                <li class=""><a href="module_element-delegate.html" title="element-delegate">element-delegate</a></li>
                                <li class=""><a href="module_event.html" title="event">event</a></li>
                                <li class=""><a href="module_event-delegate.html" title="event-delegate">event-delegate</a></li>
                                <li class=""><a href="module_event-mouseenter.html" title="event-mouseenter">event-mouseenter</a></li>
                                <li class=""><a href="module_event-simulate.html" title="event-simulate">event-simulate</a></li>
                                <li class=""><a href="module_get.html" title="get">get</a></li>
                                <li class=""><a href="module_history.html" title="history">history</a></li>
                                <li class=""><a href="module_imagecropper.html" title="imagecropper">imagecropper</a></li>
                                <li class=""><a href="module_imageloader.html" title="imageloader">imageloader</a></li>
                                <li class=""><a href="module_json.html" title="json">json</a></li>
                                <li class=""><a href="module_layout.html" title="layout">layout</a></li>
                                <li class=""><a href="module_logger.html" title="logger">logger</a></li>
                                <li class=""><a href="module_menu.html" title="menu">menu</a></li>
                                <li class=""><a href="module_paginator.html" title="paginator">paginator</a></li>
                                <li class=""><a href="module_profiler.html" title="profiler">profiler</a></li>
                                <li class=""><a href="module_profilerviewer.html" title="profilerviewer">profilerviewer</a></li>
                                <li class=""><a href="module_progressbar.html" title="progressbar">progressbar</a></li>
                                <li class=""><a href="module_resize.html" title="resize">resize</a></li>
                                <li class=""><a href="module_selector.html" title="selector">selector</a></li>
                                <li class=""><a href="module_slider.html" title="slider">slider</a></li>
                                <li class=""><a href="module_storage.html" title="Storage">Storage</a></li>
                                <li class=""><a href="module_stylesheet.html" title="stylesheet">stylesheet</a></li>
                                <li class=""><a href="module_swf.html" title="swf">swf</a></li>
                                <li class=""><a href="module_swfdetect.html" title="swfdetect">swfdetect</a></li>
                                <li class=""><a href="module_swfstore.html" title="swfstore">swfstore</a></li>
                                <li class=""><a href="module_tabview.html" title="tabview">tabview</a></li>
                                <li class=""><a href="module_treeview.html" title="treeview">treeview</a></li>
                                <li class=""><a href="module_uploader.html" title="uploader">uploader</a></li>
                                <li class=""><a href="module_yahoo.html" title="yahoo">yahoo</a></li>
                                <li class=""><a href="module_yuiloader.html" title="yuiloader">yuiloader</a></li>
                                <li class=""><a href="module_yuitest.html" title="yuitest">yuitest</a></li>
                        </ul>
                    </div>

                    <div id="classList" class="module">
                        <h4>Classes</h4>
                        <ul class="content">
                                <li class=""><a href="YAHOO.util.Color.html" title="YAHOO.util.Color">YAHOO.util.Color</a></li>
                                <li class=""><a href="YAHOO.widget.ColorPicker.html" title="YAHOO.widget.ColorPicker">YAHOO.widget.ColorPicker</a></li>
                        </ul>
                    </div>

                    <div id="fileList" class="module">
                        <h4>Files</h4>
                        <ul class="content">        
                                <li class=""><a href="Color.js.html" title="Color.js">Color.js</a></li>
                                <li class="selected"><a href="ColorPicker.js.html" title="ColorPicker.js">ColorPicker.js</a></li>
                        </ul>
                    </div>





            </div>
		</div>
	</div>
	<div id="ft">
        <hr />
        Copyright &copy; 2011 Yahoo! Inc. All rights reserved.
	</div>
</div>
<script type="text/javascript">

    var ALL_YUI_PROPS = [{"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeBlueChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeBlueChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeContainerChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeContainerChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeElementsChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeElementsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeGreenChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeGreenChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeHexChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeHexChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeHueChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeHueChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeIdsChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeIdsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeImagesChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeImagesChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforePickersizeChange", "url": "YAHOO.widget.ColorPicker.html#event_beforePickersizeChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeRedChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeRedChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeSaturationChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeSaturationChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeShowcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeShowcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeShowhexcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeShowhexcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeShowhexsummaryChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeShowhexsummaryChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeShowhsvcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeShowhsvcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeShowrgbcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeShowrgbcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeShowwebsafeChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeShowwebsafeChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeTxtChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeTxtChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeValueChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeValueChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "beforeWebsafeChange", "url": "YAHOO.widget.ColorPicker.html#event_beforeWebsafeChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_bindUI", "url": "YAHOO.widget.ColorPicker.html#method__bindUI", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "blue", "url": "YAHOO.widget.ColorPicker.html#config_blue", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "blueChange", "url": "YAHOO.widget.ColorPicker.html#event_blueChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "container", "url": "YAHOO.widget.ColorPicker.html#config_container", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "containerChange", "url": "YAHOO.widget.ColorPicker.html#event_containerChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_createHostElement", "url": "YAHOO.widget.ColorPicker.html#method__createHostElement", "type": "method"}, {"access": "", "host": "YAHOO.util.Color", "name": "dec2hex", "url": "YAHOO.util.Color.html#method_dec2hex", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "DEFAULT", "url": "YAHOO.widget.ColorPicker.html#property_DEFAULT", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "elements", "url": "YAHOO.widget.ColorPicker.html#config_elements", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "elementsChange", "url": "YAHOO.widget.ColorPicker.html#event_elementsChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_getCommand", "url": "YAHOO.widget.ColorPicker.html#method__getCommand", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "getElement", "url": "YAHOO.widget.ColorPicker.html#method_getElement", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_getH", "url": "YAHOO.widget.ColorPicker.html#method__getH", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_getS", "url": "YAHOO.widget.ColorPicker.html#method__getS", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_getV", "url": "YAHOO.widget.ColorPicker.html#method__getV", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_getValuesFromSliders", "url": "YAHOO.widget.ColorPicker.html#method__getValuesFromSliders", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "green", "url": "YAHOO.widget.ColorPicker.html#config_green", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "greenChange", "url": "YAHOO.widget.ColorPicker.html#event_greenChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "hex", "url": "YAHOO.widget.ColorPicker.html#config_hex", "type": "config"}, {"access": "", "host": "YAHOO.util.Color", "name": "hex2dec", "url": "YAHOO.util.Color.html#method_hex2dec", "type": "method"}, {"access": "", "host": "YAHOO.util.Color", "name": "hex2rgb", "url": "YAHOO.util.Color.html#method_hex2rgb", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "hexChange", "url": "YAHOO.widget.ColorPicker.html#event_hexChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_hexFieldKeypress", "url": "YAHOO.widget.ColorPicker.html#method__hexFieldKeypress", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_hexOnly", "url": "YAHOO.widget.ColorPicker.html#method__hexOnly", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_hideShowEl", "url": "YAHOO.widget.ColorPicker.html#method__hideShowEl", "type": "method"}, {"access": "", "host": "YAHOO.util.Color", "name": "hsv2rgb", "url": "YAHOO.util.Color.html#method_hsv2rgb", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "hue", "url": "YAHOO.widget.ColorPicker.html#config_hue", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "hueChange", "url": "YAHOO.widget.ColorPicker.html#event_hueChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "hueSlider", "url": "YAHOO.widget.ColorPicker.html#property_hueSlider", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID", "url": "YAHOO.widget.ColorPicker.html#property_ID", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.B", "url": "YAHOO.widget.ColorPicker.html#property_ID.B", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.B_HEX", "url": "YAHOO.widget.ColorPicker.html#property_ID.B_HEX", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.CONTROLS", "url": "YAHOO.widget.ColorPicker.html#property_ID.CONTROLS", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.CONTROLS_LABEL", "url": "YAHOO.widget.ColorPicker.html#property_ID.CONTROLS_LABEL", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.G", "url": "YAHOO.widget.ColorPicker.html#property_ID.G", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.G_HEX", "url": "YAHOO.widget.ColorPicker.html#property_ID.G_HEX", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.H", "url": "YAHOO.widget.ColorPicker.html#property_ID.H", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.HEX", "url": "YAHOO.widget.ColorPicker.html#property_ID.HEX", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.HEX_CONTROLS", "url": "YAHOO.widget.ColorPicker.html#property_ID.HEX_CONTROLS", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.HEX_SUMMARY", "url": "YAHOO.widget.ColorPicker.html#property_ID.HEX_SUMMARY", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.HSV_CONTROLS", "url": "YAHOO.widget.ColorPicker.html#property_ID.HSV_CONTROLS", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.HUE_BG", "url": "YAHOO.widget.ColorPicker.html#property_ID.HUE_BG", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.HUE_THUMB", "url": "YAHOO.widget.ColorPicker.html#property_ID.HUE_THUMB", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.PICKER_BG", "url": "YAHOO.widget.ColorPicker.html#property_ID.PICKER_BG", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.PICKER_THUMB", "url": "YAHOO.widget.ColorPicker.html#property_ID.PICKER_THUMB", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.R", "url": "YAHOO.widget.ColorPicker.html#property_ID.R", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.RGB_CONTROLS", "url": "YAHOO.widget.ColorPicker.html#property_ID.RGB_CONTROLS", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.R_HEX", "url": "YAHOO.widget.ColorPicker.html#property_ID.R_HEX", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.S", "url": "YAHOO.widget.ColorPicker.html#property_ID.S", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ids", "url": "YAHOO.widget.ColorPicker.html#config_ids", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "idsChange", "url": "YAHOO.widget.ColorPicker.html#event_idsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.SWATCH", "url": "YAHOO.widget.ColorPicker.html#property_ID.SWATCH", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.V", "url": "YAHOO.widget.ColorPicker.html#property_ID.V", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "ID.WEBSAFE_SWATCH", "url": "YAHOO.widget.ColorPicker.html#property_ID.WEBSAFE_SWATCH", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "IMAGE", "url": "YAHOO.widget.ColorPicker.html#property_IMAGE", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "images", "url": "YAHOO.widget.ColorPicker.html#config_images", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "imagesChange", "url": "YAHOO.widget.ColorPicker.html#event_imagesChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "initAttributes", "url": "YAHOO.widget.ColorPicker.html#method_initAttributes", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_initElements", "url": "YAHOO.widget.ColorPicker.html#method__initElements", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "initPicker", "url": "YAHOO.widget.ColorPicker.html#method_initPicker", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_initSliders", "url": "YAHOO.widget.ColorPicker.html#method__initSliders", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_numbersOnly", "url": "YAHOO.widget.ColorPicker.html#method__numbersOnly", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_onHueSliderChange", "url": "YAHOO.widget.ColorPicker.html#method__onHueSliderChange", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_onPickerSliderChange", "url": "YAHOO.widget.ColorPicker.html#method__onPickerSliderChange", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "OPT", "url": "YAHOO.widget.ColorPicker.html#property_OPT", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "pickersize", "url": "YAHOO.widget.ColorPicker.html#config_pickersize", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "pickersizeChange", "url": "YAHOO.widget.ColorPicker.html#event_pickersizeChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "pickerSlider", "url": "YAHOO.widget.ColorPicker.html#property_pickerSlider", "type": "property"}, {"access": "", "host": "YAHOO.util.Color", "name": "real2dec", "url": "YAHOO.util.Color.html#method_real2dec", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "red", "url": "YAHOO.widget.ColorPicker.html#config_red", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "redChange", "url": "YAHOO.widget.ColorPicker.html#event_redChange", "type": "event"}, {"access": "", "host": "YAHOO.util.Color", "name": "rgb2hex", "url": "YAHOO.util.Color.html#method_rgb2hex", "type": "method"}, {"access": "", "host": "YAHOO.util.Color", "name": "rgb2hsv", "url": "YAHOO.util.Color.html#method_rgb2hsv", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_rgbFieldKeypress", "url": "YAHOO.widget.ColorPicker.html#method__rgbFieldKeypress", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "saturation", "url": "YAHOO.widget.ColorPicker.html#config_saturation", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "saturationChange", "url": "YAHOO.widget.ColorPicker.html#event_saturationChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "setValue", "url": "YAHOO.widget.ColorPicker.html#method_setValue", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showcontrols", "url": "YAHOO.widget.ColorPicker.html#config_showcontrols", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_showcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showhexcontrols", "url": "YAHOO.widget.ColorPicker.html#config_showhexcontrols", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showhexcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_showhexcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showhexsummary", "url": "YAHOO.widget.ColorPicker.html#config_showhexsummary", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showhexsummaryChange", "url": "YAHOO.widget.ColorPicker.html#event_showhexsummaryChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showhsvcontrols", "url": "YAHOO.widget.ColorPicker.html#config_showhsvcontrols", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showhsvcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_showhsvcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showrgbcontrols", "url": "YAHOO.widget.ColorPicker.html#config_showrgbcontrols", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showrgbcontrolsChange", "url": "YAHOO.widget.ColorPicker.html#event_showrgbcontrolsChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showwebsafe", "url": "YAHOO.widget.ColorPicker.html#config_showwebsafe", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "showwebsafeChange", "url": "YAHOO.widget.ColorPicker.html#event_showwebsafeChange", "type": "event"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "skipAnim", "url": "YAHOO.widget.ColorPicker.html#property_skipAnim", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "syncUI", "url": "YAHOO.widget.ColorPicker.html#method_syncUI", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "TXT", "url": "YAHOO.widget.ColorPicker.html#property_TXT", "type": "property"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "txt", "url": "YAHOO.widget.ColorPicker.html#config_txt", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "txtChange", "url": "YAHOO.widget.ColorPicker.html#event_txtChange", "type": "event"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateFormFields", "url": "YAHOO.widget.ColorPicker.html#method__updateFormFields", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateHex", "url": "YAHOO.widget.ColorPicker.html#method__updateHex", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateHueSlider", "url": "YAHOO.widget.ColorPicker.html#method__updateHueSlider", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updatePickerSlider", "url": "YAHOO.widget.ColorPicker.html#method__updatePickerSlider", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateRGB", "url": "YAHOO.widget.ColorPicker.html#method__updateRGB", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateRGBFromHSV", "url": "YAHOO.widget.ColorPicker.html#method__updateRGBFromHSV", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateSliders", "url": "YAHOO.widget.ColorPicker.html#method__updateSliders", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_updateSwatch", "url": "YAHOO.widget.ColorPicker.html#method__updateSwatch", "type": "method"}, {"access": "protected", "host": "YAHOO.widget.ColorPicker", "name": "_useFieldValue", "url": "YAHOO.widget.ColorPicker.html#method__useFieldValue", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "value", "url": "YAHOO.widget.ColorPicker.html#config_value", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "valueChange", "url": "YAHOO.widget.ColorPicker.html#event_valueChange", "type": "event"}, {"access": "", "host": "YAHOO.util.Color", "name": "websafe", "url": "YAHOO.util.Color.html#method_websafe", "type": "method"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "websafe", "url": "YAHOO.widget.ColorPicker.html#config_websafe", "type": "config"}, {"access": "", "host": "YAHOO.widget.ColorPicker", "name": "websafeChange", "url": "YAHOO.widget.ColorPicker.html#event_websafeChange", "type": "event"}];
</script>
</body>
</html>
